<template>
  <div
    style="
      width: 100%;
      height: 100vh;
      background-color: #016b8e;
      overflow: hidden;
    "
  >
    <div style="width: 400px; margin: 150px auto">
      <div
        style="
          color: #ccccc;
          font-size: 30px;
          text-align: center;
          padding: 30px 0;
        "
      >
        新用户注册
      </div>
      <el-form ref="form" :model="form" size="normal" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="form.account" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirm">
          <el-input
            v-model="form.confirm"
            placeholder="请再次确认密码"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <a style="text-decoration:underline;color:#409EFF"  @click="$router.push('/userLogin')">已有账号,点我</a>
    </div>
  </div>
</template>

<script>
import request from "../../utils/request";

export default {
  name: "userRegister",
  data() {
    return {
      form: {},
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
        confirm: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {
    register() {
      //检测密码是否一致
      if (this.form.password != this.form.confirm) {
        this.$message({
          type: "error",
          message: "两次密码不一致,请重新输入",
        });
      }
      //首先校验规则
      this.$refs["form"].validate((valid) => {
        if (valid) {
          //对后台进行查询
          request.post("/user/register", this.form).then((res) => {
            console.log(res);
            if (res.code != "0") {
              this.$message({
                type: "error",
                message: "注册失败",
              });
            }
            this.$message({
              type: "success",
              message: "注册成功",
            });
            //路由跳转到用户登录界面
            this.$router.push("/userLogin");
            console.log("执行结束");
          });
        }
      });
    },
  },
};
</script>

<style>
</style>